---
layout: api
title: "v2.1.1 JavaScript Library: L.ILayer"
categories: api
version: v2.1.1
permalink: /api/v2.1.1/l-ilayer/
---
<h2 id="ilayer">ILayer</h2>

<p>Represents an object attached to a particular location (or a set of locations) on a map. Implemented by <a href="/mapbox.js/api/v2.1.1/l-tilelayer">tile layers</a>, <a href="/mapbox.js/api/v2.1.1/l-marker">markers</a>, <a href="/mapbox.js/api/v2.1.1/l-popup">popups</a>, <a href="/mapbox.js/api/v2.1.1/l-imageoverlay">image overlays</a>, <a href="/mapbox.js/api/v2.1.1/l-path">vector layers</a> and <a href="/mapbox.js/api/v2.1.1/l-layergroup">layer groups</a>.</p>

<h3>Methods</h3>

<table data-id='ilayer'>
	<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
	</tr>
	<tr>
<td><code><b>onAdd</b>(
<nobr>&lt;<a href="/mapbox.js/api/v2.1.1/l-map">Map</a>&gt; <i>map</i> )</nobr>
</code></td>

<td>-</td>
<td>Should contain code that creates DOM elements for the overlay, adds them to <a href="/mapbox.js/api/v2.1.1/l-map">map panes</a> where they should belong and puts listeners on relevant map events. Called on <code>map.addLayer(layer)</code>.</td>
	</tr>
	<tr>
<td><code><b>onRemove</b>(
<nobr>&lt;<a href="/mapbox.js/api/v2.1.1/l-map">Map</a>&gt; <i>map</i> )</nobr>
</code></td>

<td>-</td>
<td>Should contain all clean up code that removes the overlay's elements from the DOM and removes listeners previously added in <code>onAdd</code>. Called on <code>map.removeLayer(layer)</code>.</td>
	</tr>
</table>

<h3>Implementing Custom Layers</h3>

<p>The most important things know about when implementing custom layers are Map <a href="/mapbox.js/api/v2.1.1/l-map">viewreset</a> event and <a href="/mapbox.js/api/v2.1.1/l-map">latLngToLayerPoint</a> method. <code>viewreset</code> is fired when the map needs to reposition its layers (e.g. on zoom), and <code>latLngToLayerPoint</code> is used to get coordinates for the layer's new position.</p>

<p>Another event often used in layer implementations is <a href="/mapbox.js/api/v2.1.1/l-map">moveend</a> which fires after any movement of the map (panning, zooming, etc.).</p>

<p>Another thing to note is that you'll usually need to add <code>leaflet-zoom-hide</code> class to the DOM elements you create for the layer so that it hides during zoom animation. Implementing zoom animation for custom layers is a complex topic and will be documented separately in future, but meanwhile you can take a look at how it's done for Leaflet layers (e.g. <code>ImageOverlay</code>) in the source.</p>

<h3>Custom Layer Example</h3>

<p>Here's how a custom layer implementation usually looks:</p>

<pre><code>var MyCustomLayer = L.Class.extend({

	initialize: function (latlng) {
// save position of the layer or any options from the constructor
this._latlng = latlng;
	},

	onAdd: function (map) {
this._map = map;

// create a DOM element and put it into one of the map panes
this._el = L.DomUtil.create('div', 'my-custom-layer leaflet-zoom-hide');
map.getPanes().overlayPane.appendChild(this._el);

// add a viewreset event listener for updating layer's position, do the latter
map.on('viewreset', this._reset, this);
this._reset();
	},

	onRemove: function (map) {
// remove layer's DOM elements and listeners
map.getPanes().overlayPane.removeChild(this._el);
map.off('viewreset', this._reset, this);
	},

	_reset: function () {
// update layer's position
var pos = this._map.latLngToLayerPoint(this._latlng);
L.DomUtil.setPosition(this._el, pos);
	}
});

map.addLayer(new MyCustomLayer(latlng));
</code></pre>


